<template>
  <el-form class="query-container" ref="queryFormRef" :model="queryParams" :inline="true" @submit.native.prevent>
    <el-form-item label="用户搜索" style="width: 270px;">
      <el-input placeholder="请输入客户姓名"
                v-model="queryParams.clientName" @keydown.enter="handleQuery"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <el-card>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="申请时间" prop="startApplicationTime"></el-table-column>
      <el-table-column label="退单类型" prop="refundType">
        <template #default="scope">
          {{scope.row.cost == null ? '退定金' : '工程订单'}}
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" prop="clientName"></el-table-column>
      <el-table-column label="退单原因" prop="reasonOrder"></el-table-column>
      <el-table-column label="退款金额" prop="refundAmount"></el-table-column>
      <el-table-column label="设计师" prop="designer"></el-table-column>
      <el-table-column label="客户经理" prop="customerManager"></el-table-column>
<!--      <el-table-column label="领导审核" prop="leaderAudit"></el-table-column>-->
<!--      <el-table-column label="操作人" prop="operator"></el-table-column>-->
      <el-table-column label="操作" >
        <template #default="scope">
          <el-link type="danger" :href="'/handleRefund?id='+scope.row.id" v-if="scope.row.refundStatus==1 & $hasPermission('crm:finance:chargeback:handle')">待退单</el-link>
          <el-link type="danger" :href="'/checkRefund?id='+scope.row.id" v-if="scope.row.refundStatus==2 & $hasPermission('crm:finance:chargeback:select')">已处理</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :total="total"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
import axios from "axios";
import request from "@/utils/request";

//搜索框
const queryFormRef = ref();
const handleQuery = () => {
  queryParams.value.pageNum = 1
  listData()
}
const resetQuery = () => {
  queryParams.value = {}
  handleQuery()
}

const loading = ref(false);
const total = ref(0)
const tableData = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  clientName:''
})
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  listData()
}
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  listData()
}
const listData = () => {
  loading.value=true;
  request.get('/api/crm/refund/select',{
    params: queryParams.value
  }).then(res=>{
      tableData.value =res.data.list
      total.value =res.data.total
      loading.value=false
  })
}

const arr = ref([
    {
        id:'',
        startApplicationTime: '',
        auditTime2: '',
        refundType: '',
        clientName: '',
        refundReason: '',
        refundAmount: '',
        designer: '',
        customerManager: '',
        leaderAudit: '',
        operator: '',
        refundStatus:''
    }
    // {
    //     id:1,
    //     startApplicationTime: '2022-03-01 12:00:00',
    //     auditTime2: '2022-03-01 12:00:00',
    //     refundType: '退单类型',
    //     clientName: '客户姓名',
    //     refundReason: '退单原因',
    //     refundAmount: '退款金额',
    //     designer: '设计师',
    //     customerManager: '客户经理',
    //     leaderAudit: '领导审核',
    //     operator: '操作人',
    //     refundStatus:10
    // },
    // {
    //     id:2,
    //     startApplicationTime: '2022-03-01 12:00:00',
    //     auditTime2: '2022-03-01 12:00:00',
    //     refundType: '退单类型',
    //     clientName: '客户姓名',
    //     refundReason: '退单原因',
    //     refundAmount: '退款金额',
    //     designer: '设计师',
    //     customerManager: '客户经理',
    //     leaderAudit: '领导审核',
    //     operator: '操作人',
    //     refundStatus:20
    // }
]);

onMounted(()=>{
  listData();
})

</script>


<style scoped>

</style>